﻿@{
	Layout = "~/Views/Shared/_Layout.cshtml";
}

@section styles {
	<style type="text/css">
		.shopping-cart-list tbody tr td {
			vertical-align: middle;
		}
	</style>
}

@using dPet.Application.DataObjects;

@model IEnumerable<ServiceCategoryDto>

<div ng-controller="ServiceOrderController">
	<div class="page-header">
		<h3>创建服务订单 {{ membershipLevel.title }}</h3>
	</div>

	<div class="panel panel-default" ng-if="membershipLevel.value == ''">
		<div class="panel-heading">选择客户类别</div>
		<div class="panel-body text-center">
			<div class="btn-group btn-group-justified" style="max-width:500px; margin:0 auto;">
				<div class="btn-group btn-group-lg">
					<button type="button" class="btn btn-default" ng-click="setMembershipLevel('@MembershipLevelDto.None', '非会员')">非会员</button>
				</div>
				<div class="btn-group btn-group-lg">
					<button type="button" class="btn btn-default" ng-click="setMembershipLevel('@MembershipLevelDto.Normal', '普通会员')">普通会员</button>
				</div>
			</div>
		</div>
	</div>

	<div class="panel panel-default" ng-if="membershipLevel.value != ''">
		<div class="panel-heading">
			<button class="btn btn-info btn-sm" type="button" ng-click="showSelectServiceModal()"><span class="glyphicon glyphicon-tags"></span> 选择服务</button>
		</div>

		<table class="table table-striped text-center shopping-cart-list" ng-if="shoppingCart.length > 0">
			<thead>
				<tr>
					<th class="text-center">服务项名称</th>
					<th class="text-center">选择属性值</th>
					<th class="text-center">单价（元）</th>
					<th class="text-center" style="width:100px;">数量</th>
					<th class="text-center">小计（元）</th>
					<th class="text-center" style="width:150px;">操作</th>
				</tr>
			</thead>
			<tbody>
				<tr ng-repeat='item in shoppingCart'>
					<td>{{ item.ServiceItemName }}</td>
					<td>{{ item.SKUPropertyValueNames }}</td>
					<td>{{ item.UnitPrice | currency : '' }}</td>
					<td class='form-inline'>
						<div class='input-group' style='width:110px;'>
							<span class='input-group-btn'><button class='btn btn-default btn-sm' type='button' ng-click="minusQuantity(item)">-</button></span>
							<input type='text' class='form-control input-sm' ng-model="item.Quantity" ng-change="quantityChanged(item)" />
							<span class='input-group-btn'><button class='btn btn-default btn-sm' type='button' ng-click="addQuantity(item)">+</button></span>
						</div>
					</td>
					<td>{{ (item.UnitPrice * item.Quantity) | currency : '' }}</td>
					<td><a href='javascript:;' ng-click='removeItemFromShoppingCart($index)'>删除</a></td>
				</tr>
			</tbody>
			<tfoot>
				<tr>
					<td colspan="5">&nbsp;</td>
					<td><strong>总金额：<span>{{ calculateTotalAmount() | currency : '' }}</span> 元</strong></td>
				</tr>
			</tfoot>
		</table>

		<div class="panel-footer text-right" ng-if="shoppingCart.length > 0">
			<button type="button" class="btn btn-default btn-sm" ng-click="emptyShoppingCart()"><span class="glyphicon glyphicon-trash"></span> 清 空</button>
			<button type="button" class="btn btn-info btn-sm" ng-click="submitServiceOrder()"><span class="glyphicon glyphicon-file"></span> 下 单</button>
		</div>

		<div class="panel-body text-center" ng-if="shoppingCart.length == 0">
			<p>尚未添加任何服务项</p>
		</div>
	</div>

	<div class="modal fade" id="selectServiceModal" tabindex="-1" role="dialog" aria-hidden="true">
		<br /><br /><br /><br />
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
					<h4 class="modal-title">服务列表</h4>
				</div>
				<div class="modal-body form-horizontal">
					<div class="panel panel-default">
						<div class="panel-heading">
							<div class="input-group">
								<span class="input-group-addon input-sm">服务分类</span>
								<select class="form-control input-sm" ng-change="categoryChanged()" ng-model="selectedCategoryId">
									<option value="">请选择</option>
									@foreach (var category in Model)
									{
										<option value="@category.Id">@category.Name</option>
									}
								</select>
								<span class="input-group-addon input-sm">服务项</span>
								<select class="form-control input-sm" ng-change="serviceItemChanged()" ng-model="selectedServiceItemId" ng-options="s.Id as s.Name for s in serviceItems">
									<option value="">请选择</option>
								</select>
							</div>
						</div>
						<table class="table table-striped text-center">
							<thead>
								<tr>
									<th class="text-center">可选值</th>
									<th class="text-center" width="100px">单价（元）</th>
									<th class="text-center" width="100px">操作</th>
								</tr>
							</thead>
							<tbody>
								<tr ng-repeat='sku in serviceSKUList'>
									<td>{{ sku.SKUPropertyValueNames }}</td>
									<td>{{ sku.UnitPrice | currency : '' }}</td>
									<td><a href='javascript:;' ng-click='addServiceItemSKUIntoShoppingCart(sku)'>选择</a></td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

@section scripts {
	<script type="text/javascript">
		$(document).ready(function () {
			set_left_nav('#ln_CreateServiceOrder');
		});

		angular.module('dpet').controller('ServiceOrderController', function ($scope, $http) {
			$scope.membershipLevel = { value: '', title: '' };
			$scope.shoppingCart = [];
			$scope.selectedCategoryId = '';
			$scope.serviceItems = [];
			$scope.selectedServiceItemId = '';
			$scope.serviceSKUList = [];

			var existItemInShoppingCart = function (sku) {
				for (var i = 0; i < $scope.shoppingCart.length; i++) {
					if ($scope.shoppingCart[i].ItemId == sku.Id)
						return true;
				}

				return false;
			}

			//设置会员等级
			$scope.setMembershipLevel = function (level, title) {
				$scope.membershipLevel.value = level;
				$scope.membershipLevel.title = "[ " + title + " ]";
			}

			$scope.showSelectServiceModal = function (level, title) {
				$('#selectServiceModal').modal('show');
			}

			$scope.categoryChanged = function () {
				$scope.selectedServiceItemId = '';
				$scope.serviceItems = [];
				$scope.serviceSKUList = [];

				if ($scope.selectedCategoryId != null && $scope.selectedCategoryId != '') {
					$http.post('/Ajax/ServiceItems',
					{
						'categoryId': $scope.selectedCategoryId
					})
					.success(function (data) {
						if (data != null && data.length > 0)
							$scope.serviceItems = data;
					})
					.error(function (result) {
						alert("系统繁忙");
					});
				}
			}

			$scope.serviceItemChanged = function () {
				$scope.serviceSKUList = [];

				if ($scope.selectedServiceItemId != null && $scope.selectedServiceItemId != '') {
					$http.post('/Ajax/ServiceItemSKUListForMembership',
					{
						'serviceItemId': $scope.selectedServiceItemId,
						'membershipLevel': $scope.membershipLevel.value
					})
					.success(function (data) {
						if (data != null && data.length > 0)
							$scope.serviceSKUList = data;
					})
					.error(function (result) {
						alert("系统繁忙");
					});
				}
			}

			//将服务项添加至购物车
			$scope.addServiceItemSKUIntoShoppingCart = function (sku) {
				if (existItemInShoppingCart(sku))
					alert('该服务项已添加');
				else {
					$scope.shoppingCart.push({
						ItemId: sku.Id,
						ServiceItemName: sku.ServiceItemName,
						SKUPropertyValueNames: sku.SKUPropertyValueNames,
						UnitPrice: sku.UnitPrice,
						Quantity: 1
					});

					$('#selectServiceModal').modal('hide');
				}
			}

			//将服务项移出购物车
			$scope.removeItemFromShoppingCart = function (index) {
				$scope.shoppingCart.splice(index, 1);
			}

			//清空购物车
			$scope.emptyShoppingCart = function () {
				if (confirm("是否要清空当前列表?")) {
					$scope.shoppingCart = [];
				}
			}

			//计算总金额
			$scope.calculateTotalAmount = function () {
				var totalAmount = 0;

				angular.forEach($scope.shoppingCart, function (sku) {
					totalAmount += sku.Quantity * sku.UnitPrice;
				});

				return totalAmount;
			}

			//减少数量
			$scope.minusQuantity = function (item) {
				if (item.Quantity > 1)
					item.Quantity--;
			}

			//增加数量
			$scope.addQuantity = function (item) {
				item.Quantity++;
			}

			//数量变更检测
			$scope.quantityChanged = function (item) {
				if (isNaN(item.Quantity) || item.Quantity < 1)
					item.Quantity = 1;
			}

			//提交订单
			$scope.submitServiceOrder = function () {
				if ($scope.shoppingCart.length > 0 && confirm("确认下单?")) {
					$http.post('/ServiceOrder/Create',
						{
							'items': $scope.shoppingCart,
							'membershipLevel': $scope.membershipLevel.value
						})
						.success(function (result) {
							alert(result.Message);

							if (result.Success)
								window.location.href = "/ServiceOrder/Pay/" + result.OrderId;
						})
						.error(function (result) {
							alert("系统繁忙");
						});
				}
			}
		});
	</script>
}
